<template>
  <div>
    <Header_h />
    <article class="core_content">
      <div class="containers">
        <div class="new_banner" @click="webUrl(banner[0].href)">
          <img v-if="banner[0]" :src="banner[0].tpic" alt="" />
        </div>
        <div class="searchs_eng s_flex">
          <el-input
            clearable
            @clear="clear"
            v-model="input"
            placeholder="搜索名称、院校、研究方向"
          >
          </el-input>
          <div class="btn-left">
             <el-button type="primary" @click="search">搜索</el-button>
          </div>
        </div>
        <section class="s_flex s_flex-wrap eng_calc">
          <div
            class="flex-item"
            v-for="item in list.list"
            :key="item.id"
            @click="goProtection(item.id)"
          >
            <img :src="item.tpic" alt="" />
            <div>
              <p>
                <span class="title_color name">{{ item.name }}</span> /
                <span class="content_color">{{ item.job }}</span>
              </p>
              <p>
                <span class="title_color">所属院系：</span
                ><span class="content_color">{{ item.school }}</span>
              </p>
              <p class="line">
                <span class="title_color">科研方向：</span
                ><span class="content_color">{{ item.from }}</span>
              </p>
              <p>
                <span class="sq_see"
                  ><router-link to="#">立即查看</router-link></span
                >
              </p>
            </div>
          </div>
        </section>
      </div>
    </article>
    <Footer />
    <rightMenu @moveTo="moveTo" />

    <navItem />
  </div>
</template>

<script>
import Header_h from "@/components/Header_h";
import Footer from "@/components/Footer";
import rightMenu from "@/components/web/rightMenu";
import { excellentlist, bannerList } from "@/api/web";
import { getTeams , getLabel} from "@/api/adminWeb";

export default {
  components: {
    Header_h,
    Footer,
    
    rightMenu
  },
  data() {
    return {
      input: "",
      list: [],
      banner: [],
    };
  },
  mounted() {
    this.getList();
    // this.getBanner();
    this.team()
  },
  methods: {
          moveTo() {
      window.scrollTo(0, 0);
    },
    async getBanner() {
      try {
        this.banner = await bannerList({ from: 3 });
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    async getList() {
      try {
        this.list = await excellentlist({ keyourd: this.input });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    handleIconClick() {},
    clear() {},
    goProtection(id) {
      this.$router.push({
        path: "/web/engineering/details",
        query: { id: id },
      });
    },
    webUrl(url) {
      window.open(url);
    },
    search(){
      this.getList()
    }
  },
};
</script>

<style lang="less" scoped>
/* core_content */
.core_content {
  background: #f7fbfe;
  padding: 40px 0;
}

.core_content .item_list_img {
  width: 224px;
  height: 127px;
  object-fit: cover;
  margin-right: 25px;
}

.core_content .item_list {
  border-bottom: 1px solid #eee;
  padding: 25px 0;
}

.core_content .content_spacing {
  margin: 17px auto 30px;
}
.core_content_left {
  width: 70%;
  background-color: #fff;
  margin: 10px 0;
  // position: absolute;
  // top: 0;
  // left: 0;
}
.core_content_right {
  width: 25%;
  background-color: #fff;
  // position: absolute;
  // top:0;
  // right: 0;
  // margin:10px 0;
}
.item_right_img {
  width: 281px;
  height: 181px;
  object-fit: cover;
}
.content_right_spacing {
  margin: 10px 0;
}
.list_right {
  border-top: 1px solid #eee;
  padding: 10px 0;
  margin: 0 10px;
}
.right_title {
  margin: 0 10px;
  padding: 10px 0;
}
/* core_content */
.eng_calc{
  width:100%;
}
.flex-item {
  width:30%;
  margin:50px 20px 0;
  background-color: #fff;
  padding: 10px;
}

.flex-item p {
  margin-top: 10px;
  line-height: 25px;
}
.flex-item p:last-child {
  margin-top: 20px;
}

.flex-item img {
  width: 100%;
  height: 300px;
  object-fit: contain;
}

.flex-item .sq_success,
.flex-item .sq_end {
  margin-right: 20px;
}

.name {
  font-size: 20px;
}
.line {
  height: 75px;
}
.searchs_eng {
  width: 300px;
  margin-top: 50px;
}
.btn-left{
  margin-left:20px;
}

@media (max-width:750px) {
  .flex-item{
    width:100%;
    margin:25px 0 0;
  }
  .searchs_eng{
    width: 100%;
    margin-top:25px;
}
}
</style>